<!DOCTYPE html>
<html manifest1="chemEditor.manifest1">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="Cache-Control"content="no-cache"/>
	<!--
	<meta name="viewport" id="viewportSetting" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
  -->
	<title>Chem Editor Demo</title>
	<script src="../../libs/raphael-min.2.0.1.js"></script>
	<!--
	<script src="../../libs/kekule/kekule.js?modules=chemWidget,algorithm"></script>
	<link rel="stylesheet" type="text/css" href="../../libs/kekule/themes/default/kekule.css" />
	-->

	<script src="../../../src/kekule.js?modules=chemWidget,algorithm&min=false"></script>
	<link rel="stylesheet" type="text/css" href="../../../src/widgets/themes/default/kekule.css" />


	<script id="chemDoc1" type="chemical/x-kekule-json">
		{"defAutoScaleRefLength":0.8,"root":{"id":"o1","children":{"id":"o2","items":[{"__type__":"Kekule.Molecule","id":"m1","renderOptions":{"expanded":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":2.502349097842262,"y":38.33168247767857,"__type__":"object"},"charge":0,"parity":null,"ctab":{"nodes":[{"__type__":"Kekule.Atom","id":"a6","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":0.9861536563608841,"y":-1.759999999999998,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"},{"__type__":"Kekule.Atom","id":"a5","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":0.9861536563608841,"y":-2.5600000000000023,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"},{"__type__":"Kekule.Atom","id":"a4","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":0.293333333333333,"y":-1.3599999999999994,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"},{"__type__":"Kekule.Atom","id":"a3","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":0.293333333333333,"y":-2.9599999999999937,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"},{"__type__":"Kekule.Atom","id":"a2","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":-0.39948698969421814,"y":-1.759999999999998,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"},{"__type__":"Kekule.Atom","id":"a1","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":-0.39948698969421814,"y":-2.5600000000000023,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"}],"anchorNodes":[],"connectors":[{"__type__":"Kekule.Bond","id":"b6","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"parity":null,"bondType":"covalent","bondOrder":2,"electronCount":3,"isInAromaticRing":true,"connectedNodes":[0,1]},{"__type__":"Kekule.Bond","id":"b5","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"parity":null,"bondType":"covalent","bondOrder":1,"electronCount":3,"isInAromaticRing":true,"connectedNodes":[0,2]},{"__type__":"Kekule.Bond","id":"b4","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"parity":null,"bondType":"covalent","bondOrder":1,"electronCount":3,"isInAromaticRing":true,"connectedNodes":[1,3]},{"__type__":"Kekule.Bond","id":"b3","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"parity":null,"bondType":"covalent","bondOrder":2,"electronCount":3,"isInAromaticRing":true,"connectedNodes":[2,4]},{"__type__":"Kekule.Bond","id":"b2","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"parity":null,"bondType":"covalent","bondOrder":2,"electronCount":3,"isInAromaticRing":true,"connectedNodes":[3,5]},{"__type__":"Kekule.Bond","id":"b1","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"parity":null,"bondType":"covalent","bondOrder":1,"electronCount":3,"isInAromaticRing":true,"connectedNodes":[4,5]}],"__type__":"Kekule.StructureConnectionTable"}},{"__type__":"Kekule.Glyph.StraightLine","id":"p1","overrideRenderOptionItems":[null],"coord2D":{"x":4.529015764508928,"y":38.346920572916666,"__type__":"object"},"ctab":{"nodes":[{"__type__":"Kekule.Glyph.PathGlyphNode","id":"n1","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":3.219047619047619,"y":-2.1447619047619,"__type__":"object"},"coord3D":{"x":0,"y":0,"z":0,"__type__":"object"},"nodeType":"location"},{"__type__":"Kekule.Glyph.PathGlyphNode","id":"n2","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":4.754285714285716,"y":-2.1447619047619,"__type__":"object"},"coord3D":{"x":1.2000000000000002,"y":0,"z":0,"__type__":"object"},"nodeType":"location"}],"anchorNodes":[],"connectors":[{"__type__":"Kekule.Glyph.PathGlyphConnector","id":"c1","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"pathType":"L","pathParams":{"endArrowType":"open","endArrowWidth":0.2,"endArrowLength":0.2,"lineLength":1.5,"__type__":"object"},"connectedNodes":[0,1]}],"__type__":"Kekule.StructureConnectionTable"}},{"__type__":"Kekule.Molecule","id":"m2","renderOptions":{"expanded":true,"__type__":"object"},"overrideRenderOptionItems":[null],"charge":0,"parity":null,"ctab":{"nodes":[{"__type__":"Kekule.Atom","id":"a7","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null,null],"coord2D":{"x":6.436561172468792,"y":36.202158668154766,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"},{"__type__":"Kekule.Atom","id":"a8","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null,null],"coord2D":{"x":5.743740849441242,"y":36.60215866815476,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"},{"__type__":"Kekule.Atom","id":"a9","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null,null],"coord2D":{"x":7.129381495496341,"y":36.60215866815476,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"Cl"},{"__type__":"Kekule.Atom","id":"a10","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null,null],"coord2D":{"x":6.436561172468792,"y":35.40215866815476,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"O"},{"__type__":"Kekule.Atom","id":"a11","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null,null],"coord2D":{"x":5.05092052641369,"y":36.202158668154766,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"}],"anchorNodes":[],"connectors":[{"__type__":"Kekule.Bond","id":"b7","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null,null],"parity":null,"bondType":"covalent","bondOrder":1,"electronCount":2,"isInAromaticRing":false,"connectedNodes":[0,1]},{"__type__":"Kekule.Bond","id":"b8","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null,null],"parity":null,"bondType":"covalent","bondOrder":1,"electronCount":2,"isInAromaticRing":false,"connectedNodes":[0,2]},{"__type__":"Kekule.Bond","id":"b9","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null,null],"bondType":"covalent","bondOrder":2,"electronCount":4,"isInAromaticRing":false,"connectedNodes":[0,3]},{"__type__":"Kekule.Bond","id":"b10","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null,null],"parity":null,"bondType":"covalent","bondOrder":1,"electronCount":2,"isInAromaticRing":false,"connectedNodes":[1,4]}],"__type__":"Kekule.StructureConnectionTable"}},{"__type__":"Kekule.TextBlock","id":"t1","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null,null],"text":"+","coord2D":{"x":4.212825288318453,"y":36.35453962053571,"__type__":"object"},"size2D":{"x":0.21333333333333293,"y":0.37333333333333485,"__type__":"object"}},{"__type__":"Kekule.Molecule","id":"m3","renderOptions":{"expanded":true,"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null,null],"coord2D":{"x":8.433777669270833,"y":36.53739676339286,"__type__":"object"},"charge":0,"parity":null,"formula":{"sections":[{"__type__":"object","obj":{"__type__":"Kekule.Atom","charge":0,"parity":null,"isotopeId":"Al"},"count":1},{"__type__":"object","obj":{"__type__":"Kekule.Atom","charge":0,"parity":null,"isotopeId":"Cl"},"count":3}],"charge":0,"radical":0,"__type__":"Kekule.MolecularFormula"}},{"__type__":"Kekule.Glyph.HeatSymbol","id":"p2","renderOptions":{"strokeWidth":1.5,"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":8.1404443359375,"y":38.11834914434524,"__type__":"object"},"ctab":{"nodes":[{"__type__":"Kekule.Glyph.PathGlyphNode","id":"n3","interactMode":-1,"overrideRenderOptionItems":[null],"coord2D":{"x":0.3390476190476175,"y":-2.0057142857142836,"__type__":"object"},"coord3D":{"x":0,"y":0.2,"z":0,"__type__":"object"},"nodeType":"location"},{"__type__":"Kekule.Glyph.PathGlyphNode","id":"n4","interactMode":-1,"overrideRenderOptionItems":[null,null],"coord2D":{"x":0.512252699804506,"y":-2.305714285714288,"__type__":"object"},"coord3D":{"x":0.17320508075688776,"y":-0.09999999999999996,"z":0,"__type__":"object"},"nodeType":"location"},{"__type__":"Kekule.Glyph.PathGlyphNode","id":"n5","interactMode":-1,"overrideRenderOptionItems":[null],"coord2D":{"x":0.16584253829073248,"y":-2.305714285714288,"__type__":"object"},"coord3D":{"x":-0.17320508075688767,"y":-0.10000000000000009,"z":0,"__type__":"object"},"nodeType":"location"}],"anchorNodes":[],"connectors":[{"__type__":"Kekule.Glyph.PathGlyphConnector","id":"c2","interactMode":-1,"overrideRenderOptionItems":[null],"pathType":"L","pathParams":{"lineLength":1,"edgeCount":3,"nodeProps":{"__type__":"object","interactMode":-1},"connectorProps":{"__type__":"object","interactMode":-1},"__type__":"object"},"connectedNodes":[0,1]},{"__type__":"Kekule.Glyph.PathGlyphConnector","id":"c3","interactMode":-1,"overrideRenderOptionItems":[null],"pathType":"L","pathParams":{"lineLength":1,"edgeCount":3,"nodeProps":{"__type__":"object","interactMode":-1},"connectorProps":{"__type__":"object","interactMode":-1},"__type__":"object"},"connectedNodes":[1,2]},{"__type__":"Kekule.Glyph.PathGlyphConnector","id":"c4","interactMode":-1,"overrideRenderOptionItems":[null],"pathType":"L","pathParams":{"lineLength":1,"edgeCount":3,"nodeProps":{"__type__":"object","interactMode":-1},"connectorProps":{"__type__":"object","interactMode":-1},"__type__":"object"},"connectedNodes":[2,0]}],"__type__":"Kekule.StructureConnectionTable"}},{"__type__":"Kekule.Molecule","id":"m4","renderOptions":{"expanded":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":9.865777994791667,"y":38.89377766927083,"__type__":"object"},"charge":0,"parity":null,"ctab":{"nodes":[{"__type__":"Kekule.Atom","id":"a14","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":1.332820323027553,"y":-2.266666666666673,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"},{"__type__":"Kekule.Atom","id":"a18","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":2.0256406460551055,"y":-1.8666666666666742,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"},{"__type__":"Kekule.Atom","id":"a13","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":1.332820323027553,"y":-3.066666666666663,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"},{"__type__":"Kekule.Atom","id":"a15","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":0.6400000000000023,"y":-1.8666666666666742,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"},{"__type__":"Kekule.Atom","id":"a19","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":2.7184609690826544,"y":-2.266666666666673,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"},{"__type__":"Kekule.Atom","id":"a21","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":2.0256406460551073,"y":-1.066666666666677,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"O"},{"__type__":"Kekule.Atom","id":"a12","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":0.6400000000000023,"y":-3.4666666666666686,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"},{"__type__":"Kekule.Atom","id":"a16","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":-0.052820323027548355,"y":-2.266666666666673,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"},{"__type__":"Kekule.Atom","id":"a20","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":3.4112812921102034,"y":-1.8666666666666742,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"},{"__type__":"Kekule.Atom","id":"a17","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":-0.052820323027548355,"y":-3.066666666666663,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"}],"anchorNodes":[],"connectors":[{"__type__":"Kekule.Bond","id":"b17","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"parity":null,"bondType":"covalent","bondOrder":1,"electronCount":2,"isInAromaticRing":false,"connectedNodes":[0,1]},{"__type__":"Kekule.Bond","id":"b12","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"parity":null,"bondType":"covalent","bondOrder":2,"electronCount":3,"isInAromaticRing":true,"connectedNodes":[0,2]},{"__type__":"Kekule.Bond","id":"b13","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"parity":null,"bondType":"covalent","bondOrder":1,"electronCount":3,"isInAromaticRing":true,"connectedNodes":[0,3]},{"__type__":"Kekule.Bond","id":"b18","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"parity":null,"bondType":"covalent","bondOrder":1,"electronCount":2,"isInAromaticRing":false,"connectedNodes":[1,4]},{"__type__":"Kekule.Bond","id":"b20","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"bondType":"covalent","bondOrder":2,"electronCount":4,"isInAromaticRing":false,"connectedNodes":[1,5]},{"__type__":"Kekule.Bond","id":"b11","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"parity":null,"bondType":"covalent","bondOrder":1,"electronCount":3,"isInAromaticRing":true,"connectedNodes":[2,6]},{"__type__":"Kekule.Bond","id":"b14","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"parity":null,"bondType":"covalent","bondOrder":2,"electronCount":3,"isInAromaticRing":true,"connectedNodes":[3,7]},{"__type__":"Kekule.Bond","id":"b19","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"parity":null,"bondType":"covalent","bondOrder":1,"electronCount":2,"isInAromaticRing":false,"connectedNodes":[4,8]},{"__type__":"Kekule.Bond","id":"b16","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"parity":null,"bondType":"covalent","bondOrder":2,"electronCount":3,"isInAromaticRing":true,"connectedNodes":[6,9]},{"__type__":"Kekule.Bond","id":"b15","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"parity":null,"bondType":"covalent","bondOrder":1,"electronCount":3,"isInAromaticRing":true,"connectedNodes":[7,9]}],"__type__":"Kekule.StructureConnectionTable"}},{"__type__":"Kekule.TextBlock","id":"t2","renderOptions":{"fontFamily":"Georgia, Times New Roman, Times, serif","fontSize":20,"useAtomSpecifiedColor":false,"color":"#000066","__type__":"object"},"overrideRenderOptionItems":[null,null],"text":"Friedel-Crafts Reaction","coord2D":{"x":4.825777994791667,"y":34.6804443359375,"__type__":"object"},"size2D":{"x":5.501333414713541,"y":0.5333333333333385,"__type__":"object"}}],"__type__":"Kekule.ChemObjList"},"__type__":"Kekule.ChemSpaceElement"},"enableAutoId":true,"screenSize":{"x":900,"y":1500,"__type__":"object"},"size2D":{"x":24,"y":40,"__type__":"object"},"__type__":"Kekule.ChemDocument"}
	</Script>

	<script>
		var chemEditor;
		var chemComposer;
		function init()
		{
			var elem = document.getElementById('chemComposer');
			var chemEditor = new Kekule.Editor.ChemSpaceEditor(document, null, Kekule.Render.RendererType.R2D);
			chemComposer = new Kekule.Editor.Composer(elem, chemEditor);

			// adjust size
			adjustSize();

			window.onresize = adjustSize;
		}
		function adjustSize()
		{
			//window.onresize = null;
			//var dim = Kekule.HtmlElementUtils.getViewportDimension(document);
			var margin = {width: 10, height: 10}; //{'width': 50, 'height': 30};
			var dim = Kekule.DocumentUtils.getClientDimension(document);
			dim.width -= margin.width;
			dim.height -= margin.height;
			//chemComposer.setWidth(dim.width - 50 + 'px').setHeight(dim.height - 30 + 'px');
			chemComposer.setWidth(dim.width + 'px').setHeight(dim.height + 'px');
			console.log('set composer: ', dim.width, dim.height);
			//window.onresize = adjustSize;
		}

		Kekule.X.domReady(init);
	</script>
	<style>
		html, body
		{
			margin: 0;
			padding: 0;
			overflow: hidden;
			touch-action: none;
		}
		#chemComposer
		{
			margin: 0;
		}
	</style>
</head>
<body onload="init()">
	<div id="chemComposer" style="width:800px;height:600px" data-chem-obj="url(#chemDoc1)"></div>
</body>
</html>